/**
 * Created by jean.h.ma on 14/03/2018.
 */

import React from 'react'
import Base from '@codefree/badger/app/components/Base'
import PropTypes from 'prop-types'
import classNames from 'classnames'

export default class SlideMenu extends Base {
	static propTypes = {
		menus: PropTypes.arrayOf(PropTypes.shape({
			id: PropTypes.string,
			text: PropTypes.string,
			icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
			to: PropTypes.string,
			children: PropTypes.array
		})).isRequired
	};

	constructor(props) {
		super(props);
		this.state = {
			selected: ""
		};
	}

	onLinkClick(link) {
		this.updateState({
			selected: {$set: link.id}
		})
	}

	render() {
		return (
			<div className="pure-menu badger-slide-menu">
				<ul className="pure-menu-list">
					{this.props.menus.map((item, index) => {
						return (
							<li className={classNames("pure-menu-item", {"pure-menu-selected": this.state.selected === item.id})}
								key={`${index}`}>
								<a href="#" className="pure-menu-link"
								   onClick={this.onLinkClick.bind(this, item)}>{item.icon} {item.text}</a>
							</li>
						);
					})}
					<li className="pure-menu-item ">
						<a href="#" className="pure-menu-link"><i className="fa fa-home"></i> Flickr</a>
					</li>
					<li className="pure-menu-item"><a href="#" className="pure-menu-link">Messenger</a></li>
					<li className="pure-menu-item"><a href="#" className="pure-menu-link">Sports</a></li>
					<li className="pure-menu-item"><a href="#" className="pure-menu-link">Finance</a></li>
					<li className="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
						<a href="#" id="menuLink1" className="pure-menu-link">More</a>
						<ul className="pure-menu-children">
							<li className="pure-menu-item"><a href="#" className="pure-menu-link">Autos</a></li>
							<li className="pure-menu-item"><a href="#" className="pure-menu-link">Flickr</a></li>
							<li className="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
								<a href="#" id="menuLink1" className="pure-menu-link">Even More</a>
								<ul className="pure-menu-children">
									<li className="pure-menu-item"><a href="#" className="pure-menu-link">Foo</a></li>
									<li className="pure-menu-item"><a href="#" className="pure-menu-link">Bar</a></li>
									<li className="pure-menu-item"><a href="#" className="pure-menu-link">Baz</a></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		);
	}
}